<template>
  <div id="main">
    <H1>首页</H1>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="个人信息" name="1">
          <router-link :to="{name:'User',params: {id:1}}">用户</router-link>
        </el-collapse-item>
        <el-collapse-item title="用户信息" name="2">
          <router-link to="/user/UserInfo">用户信息</router-link>
        </el-collapse-item>
      </el-collapse>
    <el-main>
      <router-view/>
    </el-main>
  </div>

</template>

<script>
export default {
  data () {
    return {
      activeNames: ['1']
    }
  },
  methods: {
    handleChange (val) {
      console.log(val)
    },
    getData: function () {
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/static/mock/data.json'
      }).then(function (response) {
        console.info(response)
      })
    }
  },
  // 钩子函数 之前做什么
  beforeRouteEnter: function (to, from, next) {
    console.info('进入路由之前')
    next(vm => {
      vm.getData()
    })
  },
  // 钩子函数 之前做什么
  beforeRouteLeave: function (to, from, next) {
    console.info('进入路由之后')
    next()
  }

}

</script>

<style scoped>

</style>
